<template>
    <view class="tag-selector flex-layout-row gap-col2">
        <view class="u-page__tag-item gap-row gap-col" style="flex-wrap: wrap" v-for="(item, index) in source" :key="index">
            <u-tag @click="handleSelect" shape="circle" size="large" :color="item.checked ? '#fff' : '#006eff'" :text="item.name" :plain="!item.checked" :name="index"></u-tag>
        </view>
    </view>
</template>

<script>
export default {
    name: 'sale-selector',
    props: {
        name: String
    },
    data() {
        return {
            source: [
                {
                    name: this.$t('text.apartment'),
                    checked: true
                },
                {
                    name: this.$t('text.duplex'),
                    checked: false
                },
                {
                    name: this.$t('text.villa'),
                    checked: false
                },
                {
                    name: this.$t('text.house'),
                    checked: false
                }
            ]
        };
    },

    methods: {
        handleSelect(name) {
            //this.source[name].checked = !this.source[name].checked;
            this.source.map((item, index) => {
                item.checked = index === name ? true : false;
            });
            this.$emit(
                'change',
                this.name,
                this.source.filter((a) => a.checked).map((a) => a.name)
            );
        }
    }
};
</script>

<style lang="scss" scoped>
.tag-selector {
    flex-wrap: wrap;
}
</style>
